<template>
  <div class="trip">
    <div class="trip-left" v-show="isShow">
      <div class="conter-box jinriyiqing">
        <div class="conter-title"><span>今日疫情防控</span></div>
        <div class="conter-detail" style="height: 1.5rem">
          <ul>
            <li>
              <span>体温监测总数</span>
              <span
                ><strong>{{ 467 }}</strong></span
              >
            </li>
            <li>
              <span>正常</span>
              <span
                ><strong>{{ 467 }}</strong></span
              >
            </li>
            <li>
              <span>异常</span>
              <span
                ><strong>{{ 0 }}</strong></span
              >
            </li>
            <li>
              <span>健康数据填报</span>
              <span
                ><strong>{{ 567 }}</strong></span
              >
            </li>
            <li>
              <span>正常</span>
              <span
                ><strong>{{ 567 }}</strong></span
              >
            </li>
            <li>
              <span>异常</span>
              <span
                ><strong>{{ 0 }}</strong></span
              >
            </li>
          </ul>
        </div>
      </div>

      <div class="conter-box yujingtixing">
        <div class="conter-title"><span>体温监测记录</span></div>
        <div class="conter-detail">
          <div class="bo-table" style="padding: 0 10px">
            <el-row type="flex" justify="space-between">
              <el-col :span="4">监测时间</el-col>
              <el-col :span="5">监测位置</el-col>
              <el-col :span="5">监测温度</el-col>
              <el-col :span="4">姓名</el-col>
              <el-col :span="6">居住地址</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="4">20：23：12</el-col>
              <el-col :span="5">好景-南门-进</el-col>
              <el-col :span="5">36.5℃</el-col>
              <el-col :span="4">张三</el-col>
              <el-col :span="6">好景国际2栋3号</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="4">19：53：23</el-col>
              <el-col :span="5">好景-南门-出</el-col>
              <el-col :span="5">36.5℃</el-col>
              <el-col :span="4">张虎</el-col>
              <el-col :span="6">好景国际1栋8号</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="4">19：12：33</el-col>
              <el-col :span="5">好景-南门-出</el-col>
              <el-col :span="5">36.0℃</el-col>
              <el-col :span="4">侯冰</el-col>
              <el-col :span="6">好景国际6栋7号</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="4">17：14：55</el-col>
              <el-col :span="5">好景-北门-进</el-col>
              <el-col :span="5">35.5℃</el-col>
              <el-col :span="4">周华</el-col>
              <el-col :span="6">好景国际4栋6号</el-col>
            </el-row>
          </div>
          
        </div>
      </div>

      <div class="conter-box jinriyiqing">
        <div class="conter-title"><span>体温监测记录</span></div>
        <div class="conter-detail" style="height: 1.8rem">
          <div style="width: 100%;height: 100%;" id="myChart"></div>
        </div>
      </div>
    </div>
    <div class="trip-content"  v-show="isShow">
      <div class="conter-box yujingtixing">
        <div class="conter-title"><span>商业体停车实况</span></div>
        <div class="conter-detail" >
          <div class="tincheshikuan">
            <span class="shangye">商业1区</span>
            <span>
              <b>车位总数</b>
              <strong>1505</strong>
            </span>
            <span>
              <b>空闲车位数</b>
              <strong>375</strong>
            </span>
            <div class="kongxianlv">
              <p><span>空闲率</span><strong>37</strong></p>
              <div></div>
            </div>
          </div>
          <div class="tincheshikuan">
            <span class="shangye">商业2区</span>
            <span>
              <b>车位总数</b>
              <strong>1022</strong>
            </span>
            <span>
              <b>空闲车位数</b>
              <strong>236</strong>
            </span>
            <div class="kongxianlv">
              <p><span>空闲率</span><strong>29</strong></p>
              <div></div>
            </div>
          </div>
        </div>
      </div>

      <div class="conter-box yujingtixing">
        <div class="conter-title"><span>停车预警提醒</span></div>
        <div class="conter-detail">
          <div class="bo-table" style="padding: 0 10px">
            <el-row type="flex" justify="space-between">
              <el-col :span="2">&nbsp;</el-col>
              <el-col :span="6">车牌号码</el-col>
              <el-col :span="6">位置</el-col>
              <el-col :span="6">停留时间</el-col>
            </el-row>
            <el-row type="flex"  justify="space-between">
              <el-col :span="2">{{ 1 }}</el-col>
              <el-col :span="6">京A34345</el-col>
              <el-col :span="6">小区西</el-col>
              <el-col :span="6">7小时</el-col>
            </el-row>
            <el-row type="flex"  justify="space-between">
              <el-col :span="2">{{ 2 }}</el-col>
              <el-col :span="6">京N14344</el-col>
              <el-col :span="6">小区西</el-col>
              <el-col :span="6">3小时</el-col>
            </el-row>
            <el-row type="flex"  justify="space-between">
              <el-col :span="2">{{ 3 }}</el-col>
              <el-col :span="6">京N78654</el-col>
              <el-col :span="6">小区西</el-col>
              <el-col :span="6">12小时</el-col>
            </el-row>
            <el-row type="flex"  justify="space-between">
              <el-col :span="2">{{ 4 }}</el-col>
              <el-col :span="6">京B87452</el-col>
              <el-col :span="6">小区西</el-col>
              <el-col :span="6">18小时</el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="conter-box yujingtixing">
        <div class="conter-title"><span>车辆进出分析</span> <strong @click="openTable">详情</strong></div>
        <div class="conter-detail">
          <div class="bo-table" style="padding: 0 10px">
            <el-row type="flex" justify="space-between">
              <el-col :span="4">车牌</el-col>
              <el-col :span="5">位置名称</el-col>
              <el-col :span="5">时间</el-col>
              <el-col :span="5">所属小区</el-col>
              <el-col :span="5">出行性质</el-col>
            </el-row>
            <el-row type="flex" v-for="(item, index) in tableData" :key="index" justify="space-between">
              <el-col :span="4">{{ item.name }}</el-col>
              <el-col :span="5">{{ item.address }}</el-col>
              <el-col :span="5">{{ item.date }}</el-col>
              <el-col :span="5">{{ item.xiaoqu }}</el-col>
              <el-col :span="5">{{ item.menjin }}</el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <div class="trip-right"  v-show="isShow">
      <div class="conter-box yujingtixing">
        <div class="conter-title"><span>电动自行车充电监测记录</span></div>
        <div class="conter-detail">
          <div class="bo-table" style="padding: 0 10px">
            <el-row type="flex" justify="space-between">
              <el-col :span="4">&nbsp;</el-col>
              <el-col :span="5">报警站点</el-col>
              <el-col :span="5">报警类型</el-col>
              <el-col :span="5">报警时间</el-col>
              <el-col :span="5">报警状态</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="2">1</el-col>
              <el-col :span="7">好景国际一期 地下车棚</el-col>
              <el-col :span="5">掉电报警</el-col>
              <el-col :span="5">2022-1-1</el-col>
              <el-col :span="5">已处理</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="2">2</el-col>
              <el-col :span="7">好景国际二期 地下车棚</el-col>
              <el-col :span="5">温度报警</el-col>
              <el-col :span="5">2021-11-12</el-col>
              <el-col :span="5">已处理</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="2">3</el-col>
              <el-col :span="7">好景国际三期 地下车棚</el-col>
              <el-col :span="5">掉电报警</el-col>
              <el-col :span="5">2021-10-11</el-col>
              <el-col :span="5">已处理</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="2">4</el-col>
              <el-col :span="7">好景国际四期 地下车棚</el-col>
              <el-col :span="5">温度报警</el-col>
              <el-col :span="5">2021-09-21</el-col>
              <el-col :span="5">已处理</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="2">5</el-col>
              <el-col :span="7">好景国际五期 地下车棚</el-col>
              <el-col :span="5">温度报警</el-col>
              <el-col :span="5">2021-12-21</el-col>
              <el-col :span="5">已处理</el-col>
            </el-row>
          </div>
          
        </div>
      </div>
      <div class="conter-box yujingtixing">
        <div class="conter-title"><span>电动自行车充电异常报警</span></div>
        <div class="conter-detail">
          <div class="bo-table" style="padding: 0 10px">
            <el-row type="flex" justify="space-between">
              <el-col :span="2">&nbsp;</el-col>
              <el-col :span="4">地址</el-col>
              <el-col :span="2">状态</el-col>
              <el-col :span="4"></el-col>
              <el-col :span="6">详情</el-col>
              <el-col :span="6"></el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col class="flex-center" :span="2">1</el-col>
              <el-col class="flex-center"  :span="4">好景国际一期 地下车棚</el-col>
              <el-col class="flex-center"  :span="2">在线</el-col>
              <el-col :span="4">
                <p>温度</p>
                <p>电压</p>
                <p>电流</p>
              </el-col>
              <el-col :span="6">
                <p>14.3°C</p>
                <p>230V</p>
                <p>1.42A</p>
              </el-col>
              <el-col :span="6">
                <p>≤70°C</p>
                <p>190V≤电压≤250V</p>
                <p>0A≤电流≤590A</p>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col  class="flex-center"  :span="2">2</el-col>
              <el-col class="flex-center"  :span="4">好景国际二期 地下车棚</el-col>
              <el-col class="flex-center"  :span="2">在线</el-col>
              <el-col :span="4">
                <p>温度</p>
                <p>电压</p>
                <p>电流</p>
              </el-col>
              <el-col :span="6">
                <p>14.3°C</p>
                <p>230V</p>
                <p>1.42A</p>
              </el-col>
              <el-col :span="6">
                <p>≤70°C</p>
                <p>190V≤电压≤250V</p>
                <p>0A≤电流≤590A</p>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col  class="flex-center"  :span="2">3</el-col>
              <el-col class="flex-center"  :span="4">好景国际三期 地下车棚</el-col>
              <el-col class="flex-center"  :span="2">在线</el-col>
              <el-col class="flex-center"  :span="4">
                <p>温度</p>
                <p>电压</p>
                <p>电流</p>
              </el-col>
              <el-col :span="6">
                <p>14.3°C</p>
                <p>230V</p>
                <p>1.42A</p>
              </el-col>
              <el-col :span="6">
                <p>≤70°C</p>
                <p>190V≤电压≤250V</p>
                <p>0A≤电流≤590A</p>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col class="flex-center"  :span="2">4</el-col>
              <el-col class="flex-center"  :span="4">好景国际四期 地下车棚</el-col>
              <el-col class="flex-center"  :span="2">在线</el-col>
              <el-col :span="4">
                <p>温度</p>
                <p>电压</p>
                <p>电流</p>
              </el-col>
              <el-col :span="6">
                <p>14.3°C</p>
                <p>230V</p>
                <p>1.42A</p>
              </el-col>
              <el-col :span="6">
                <p>≤70°C</p>
                <p>190V≤电压≤250V</p>
                <p>0A≤电流≤590A</p>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col class="flex-center"  :span="2">5</el-col>
              <el-col class="flex-center"  :span="4">好景国际五期 地下车棚</el-col>
              <el-col class="flex-center"  :span="2">在线</el-col>
              <el-col :span="4">
                <p>温度</p>
                <p>电压</p>
                <p>电流</p>
              </el-col>
              <el-col :span="6">
                <p>13.3°C</p>
                <p>230V</p>
                <p>1.42A</p>
              </el-col>
              <el-col :span="6">
                <p>≤70°C</p>
                <p>190V≤电压≤250V</p>
                <p>0A≤电流≤590A</p>
              </el-col>
            </el-row>
          </div>
          
        </div>
      </div>
    </div>
    <Table @handleClose="handleClose" :dialogVisible="dialogVisible" :option="option" :tableData="tableData"/>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
import Table from '@/components/table.vue'
export default {
  components: {
    Table
  },
  data() {
    return {
      isShow: true,
      dialogVisible: false,
      option: [
         { prop: 'name', label: '车牌' },
         { prop: 'address', label: '位置名称' },
         { prop: 'date', label: '时间' },
         { prop: 'xiaoqu', label: '所属小区' },
         { prop: 'type', label: '出行性质' },
         { prop: 'image', label: '抓拍照片' },
       ],
       tableData: [
        { name: '京A23214',address: '好景-南门',date: '2021-12-06', xiaoqu: '好景国际', type: '进', menjin: '好景-南门',image: ''},
        { name: '京B80087',address: '好景-南门',date: '2021-12-06', xiaoqu: '好景国际', type: '出', menjin: '好景-南门',image: ''},
        { name: '京A78433',address: '好景-北门',date: '2021-12-06', xiaoqu: '好景国际', type: '出', menjin: '好景-南门',image: ''},
        { name: '京C24324',address: '好景-南门',date: '2021-12-06', xiaoqu: '好景国际', type: '进', menjin: '好景-南门',image: ''},
       ]
    }
  },
  mounted() {
    let option = {
      grid: {
        height: 140,
        with: 260,
        left: 30,
        top: 20,
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'].map(item => ({
          value: item,
          textStyle: { color: '#fff' }
        }))
      },
      yAxis: {
        type: 'value',
        nameTextStyle:{ color: '#fff' },
            axisLine: {
          lineStyle: {
              color: '#fff'
          }
        },

      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130].map(item => ({ value: item, 
          itemStyle: {
            color: '#00D8FF'
          } })),
          type: 'bar',
           barMaxWidth: 30,
        }
      ]
    };
    var myChart = echarts.init(document.getElementById("myChart"));
    myChart.setOption(option);
  },
  methods: {
    handleClose() {
      this.isShow = true;
      this.dialogVisible = false
    },
    openTable() {
      this.isShow = false;
      this.dialogVisible = true
    }
  }
};
</script>

<style lang="scss">
.trip {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding:0.5rem 0.5rem 0;
  box-sizing: border-box;
  .trip-left {
    display: flex;
    flex-direction: column;
    width: 6rem;
  }
  .trip-content {
    display: flex;
    flex-direction: column;
    width: 6rem;
  }
  .trip-right {
    display: flex;
    flex-direction: column;
    width: 6rem;
  }
}
.jinriyiqing {
  display: flex;
  flex-direction: column;
  ul {
    height: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.3rem;
    box-sizing: border-box;
    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      span {
        font-size: 0.18rem;
        font-weight: 500;
        strong {
          color: #00fe90;
          font-size: 0.4rem;
        }
      }
    }
  }
}

.tincheshikuan{
  display: flex;
  justify-content: space-between;
  padding: 0 0.2rem;
  box-sizing: border-box;
  margin-bottom: 0.2rem;
  .shangye {
    font-size: 0.25rem;
  }
  span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    b {
      font-size: 0.18rem;
      font-weight: 400;
    }
    strong {
      font-size: 0.3rem;
      color: #00fe90;
    }
  }
  .kongxianlv {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    width: 2rem;
    p {
      width: 100%;
      display: flex;
      justify-content: space-between;
      span {
        font-size: 0.18rem;
      }
      strong {
        font-size: 0.25rem;
        color: #00fe90;
      }
    }
    div {
      width: 2rem;
      height: 0.04rem;
      background: #65beff;
      margin-top: 0.1rem;
    }
  }
}

.yujingtixing {
  .ul-table {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-top: 0.1rem;
    padding: 0.15rem;
    box-sizing: border-box;
    li {
      display: flex;
      line-height: 0.35rem;
      span {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 0 0.04rem;
        text-align: center;
        &:nth-child(1) {
         flex: 1;
        }
        &:nth-child(2) {
          flex: 1;
        }
        &:nth-child(3) {
          flex: 1;
        }
        &:nth-child(4) {
          flex: 1;
        }
        &:nth-child(5) {
          flex: 1;
        }
      }
      &:nth-child(even) {
        background: #22485391;
      }
      &:nth-child(odd) {
        background: #1125309a;
      }
    }
    :nth-child(1) span {
      background: rgba(153, 153, 153, 0.5);
    }
  }
}

.conter-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #071726bd;
  padding: 0.12rem;
  box-sizing: border-box;
  margin-bottom: 0.15rem;
  border-radius: 0.05rem;
  .conter-title {
    position: relative;
    color: #fff;
    font-size: 0.24rem;
    height: 0.4rem;
    display: flex;
    justify-content: space-between;
    strong {
      font-size: 0.2rem;
      font-weight: 400;
    }
    &::after {
      position: absolute;
      bottom: -0.1rem;
      left: 0;
      height: 0.1rem;
      width: 100%;
      content: "";
      display: inline-block;
      background: url("../../assets/person/title_bottom.png") no-repeat;
      background-size: 100% 100%;
    }
    span {
      display: inline-block;
      position: relative;
      text-indent: 0.24rem;
      &::after {
        position: absolute;
        top: 0.05rem;
        left: 0;
        content: "";
        display: inline-block;
        width: 0.14rem;
        height: 0.14rem;
        border: 0.02rem solid #65beff;
        border-radius: 50%;
        opacity: 1;
      }
    }
  }
  .conter-detail {
    position: relative;
    width: 100%;
    margin-top: 0.2rem;
  }
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>